<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>景区周边</title>
    <link href="/css/styleShibanhe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<style>
    .content{min-width: 1300px;overflow-x:auto;}
    .banner{width: 100%;height: 484px;background: url(/img/banner2.png) no-repeat center center;background-size: 1920px 100%;position: relative;}
    .bannerArea{width: 1190px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 60px;text-align: right;z-index: 2;}
    .bannerArea p{font-size: 35px;color: #fff;line-height: 1.4;font-weight: 200;text-transform:uppercase;}
    .nav{width: 100%;height: 48px;background: url(/img/nav.png) no-repeat center center;background-size: 1920px 48px;}
    .nav p{width: 1260px;margin: 0 auto;display: flex;align-items: center;height: 48px;color: #000000;}
    .nav p img{margin-right: 10px;}

    .main{width: 100%;background: url(/img/back2.png) no-repeat;background-size: 1920px 1346px;background-position: center bottom;padding-top: 1px;}
    .spot{width: 1240px;overflow: hidden;margin: 0 auto 48px;padding-left: 20px;padding-bottom: 10px;}
    .spotBox1{width:700px;height: 400px;float: left;border:1px solid #ccc}
    .spotBox2{width:500px;height: 400px;float: left;border:1px solid #ccc;}
    .spotBox3{width:1203px;float: left;margin-top: 20px;background: #fff;background: rgb(249,249,249);border-radius:2px 2px 2px 2px;/*box-shadow: 0 0 10px 1px #666;*/}
	.spotBox3_top{width: 100px;height: 52px;line-height: 52px;background: rgb(73,170,73);color: #fff;text-align: center;border-radius: 2px 0 0 0;}
	.spotBox3_content{padding: 20px;background: #fff;border-radius:0 0 2px 2px;}
    .spotImg{width: 95%;height: 95%;position: relative;top:10px;left:16px}
    .spotBox2 p:nth-of-type(1){font-size:25px;font-weight: bolder;margin-left:25px;margin-top: 20px;}
    .spotBox2 p:nth-of-type(2){font-size:15px;position: relative;top:20px;left: 27px}
    .spotBox2 p:nth-of-type(2) img{position: relative;top:5px;left: -5px;width: 20px}
    .spotBox2 p:nth-of-type(3) {position: relative;top:25px;left:25px;font-size:15px;}
    .spotBox2 p:nth-of-type(3) img{position: relative;top:5px;left: -5px;width: 24px}
    .spotBox2 p:nth-of-type(4){font-size:14px;position: relative;top:80px;left: 27px;color:#FF6600;font-style:italic;}
    .spotBox2 p:nth-of-type(4) span{font-size:30px;}
    .spotBox2 p:nth-of-type(5){font-size:15px;position: relative;top:35px;left:280px;height: 45px;width: 150px;background:#FF6600;}
    .spotBox2 p:nth-of-type(5) span{margin-left: 40px;color: white;line-height: 42px;cursor: pointer;}
    .language{position: absolute;top:30px;right: 30px;font-size: 12px;z-index: 222}
    .language span{margin: 0 3px;color: #ccc;}
    .language .cur{color: #fff;}
    .nav a{color: black}
    .orderInfo{width: 486px;margin: 40px auto 22px;}
    .inputBox{height: 39px;border: 1px solid rgb(36,123,138); border-radius: 4px; margin-bottom: 15px;padding: 0 15px;display: flex;align-items: center;font-size: 16px;color: #000000;}
    .inputBox span{width: 95px;}
    .inputBox em{margin-left: 2em;font-style: normal;}
    .inputBox input{width: calc(100% - 95px);border: none;background: none;height: 39px;outline: none;font-size: 16px;}
    .pay{margin-bottom: 14px;}
    .result{margin: 40px auto 0;display: block;}
    .payChange label{display: inline-flex;align-items: center;margin-right: 35px;}
    .payChange label img{margin-left: 10px;}

</style>
<div class="content" id="cover">
    <div class="banner">
        <div class="language">
            <span class="cur">中文</span>
            <span>English</span>
            <span>日本語</span>
            <span>한국어</span>
        </div>
        <div class="head">
            <div class="headLeft cur">
                <a href="/">网站首页</a>
            </div>
            <div class="headLeft">
                <a href="/walking">走进景区</a>
            </div>
            <div class="headLeft">
                <a href="/impression">印象景区</a>
            </div>
            <div class="headLeft">
                <a href="/play">玩转景区</a>
            </div>
            <img class="logo" src="/img/logo.jpg" style="width:180px;height:172px"/>
            <div class="headRight">
                <a href="/shopping">景区周边</a>
            </div>
            <div class="headRight">
                <a href="/dynamic">景区动态</a>
            </div>
            <div class="headRight">
                <a href="/strategy">旅游攻略</a>
            </div>
            <div class="headRight">
                <a href="/service">客户服务</a>
            </div>
        </div>
        <div class="bannerArea">
            <p>> 景区周边</p>
            <p>impression&nbsp;·&nbsp;SHI BAN HE</p>
        </div>
    </div>

    <div class="nav">
        <p><img src="/img/location.png"/>您的位置：<a href="/">网站首页&nbsp;></a>&nbsp;<a href="#">预定详情</a></p>
    </div>

    <div class="main">
        <br>
        <div class="spot">
            <div class="spotBox1">
                <img class="spotImg" src="/img/shoppingdetail.png" />
            </div>
            <div class="spotBox2">
                <p class="articleTitle">汉鑫誉大酒店</p>
                <p><img src="/img/address.png">地址:<span class="articleIntroduction">永城市芒山镇刘邦蛇处向南120米</span></p>
                <p><img src="/img/telphone.png">电话:<span class="telphone">13856929696</span></p>
                <p>￥<span class="price">99.00</span>起&nbsp;&nbsp;<span style="color:#808080;text-decoration:line-through;font-size: 14px" class="originalPrice">原价:￥104</span></p>
                <p class="yuding"><span>立即预定</span></p>
            </div>
            <div class="spotBox3">
                <div class="spotBox3_top">
					详情介绍
                </div>
                <div class="spotBox3_content" >

                </div>
            </div>
        </div>

        <div class="footer">
            <div class="footerTop">
                <span id="link">友情链接：</span>
                <!--<a href="#"><img src="/img/icon2.png" /></a>-->
            </div>
            <ul class="footUl">
                <li><a href="/">网站首页</a></li>
                <li><a href="/walking">走进石板河</a></li>
                <li><a href="/impression">印象石板河</a></li>
                <li><a href="/play">玩转石板河</a></li>
                <li><a href="/surrounding">景区导览</a></li>
                <li><a href="/dynamic">景区动态</a></li>
                <li><a href="/strategy">旅游攻略</a></li>
                <li><a href="/service.html">客户服务</a></li>
            </ul>
            <p><span id="companyName">安徽省石板河旅游发展有限公司</span>　版权所有　 <span id="copyright">Copyright © 2020 All Right Reserve　</span></p>
            <p>免责申明　皖公网安备 <span id="recordNo">34018102340321号</span></p>
            <p>技术支持：<span id="technicalSupport">徽章纵视</span></p>
        </div>
    </div>
</div>




<div class="payPosition" style="width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.6); top: 0;left:0;align-items: center;justify-content: center;z-index: 1111;display: none;">
    <div class="PositionBox" style="padding: 20px 30px;background: #fff;border-radius: 4px;width: 486px;position: relative;">
		<span class="closeBox" style="position: absolute;right: 15px;top: 10px;font-size: 30px;color: #333;line-height: 1;cursor: pointer;">×</span>
    	<div class="orderInfo">
    	    <div class="inputBox">
    	        <span>您的姓名：</span>
    	        <input type="text" id="name" placeholder="请填写您的姓名" />
    	    </div>
    	    <div class="inputBox">
    	        <span>您的地址：</span>
    	        <input type="text" id="adress" placeholder="请填写您的地址" />
    	    </div>
    	    <div class="inputBox">
    	        <span>购买数量：</span>
    	        <input type="text" id="orderNum" placeholder="请填写你要买的数量" />
    	    </div>
    	    <div class="inputBox">
    	        <span>联系电话：</span>
    	        <input type="text" id="telphone" placeholder="请填写联系电话" />
    	    </div>
    	    <div class="inputBox">
    	        <span>支付金额：</span>
    	        <input type="text" id="payMoney" placeholder="支付金额" />
    	    </div>
    	    <div class="inputBox">
    	        <span>备注：</span>
    	        <input type="text" id="remark" placeholder="备注" />
    	    </div>
    	    <img class="pay" src="/img/pay.png" />
    	    <div class="payChange">
    	        <label>
    	            <input checked type="radio" name="pay" payId="0" />
    	            <img src="/img/weixin.png"  />
    	        </label>
    	        <label>
    	            <input type="radio" name="pay" payId="1" />
    	            <img src="/img/alpay.png" />
    	        </label>
    	    </div>
    	    <img class="result" src="/img/result.png" />
    	</div>
    </div>
	<div class="payMethod" style="width: 401px;position: relative;height: 600px;">
		<span class="closeBox" style="position: absolute;right: 15px;top: 10px;font-size: 30px;color: #333;line-height: 1;cursor: pointer;">×</span>
		<img style="width: 100%;" src="/img/payMethod.jpg" />
	</div>
</div>
<script src="/js/jquery.min.js"></script>
<script>
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    $(".yuding").click(function(){
		$(".payPosition").css('display','flex');
		$(".PositionBox").show();
		$(".payMethod").hide();
        $("#cover").css("opacity","0.3");
    })
	
	$(".result").click(function(){
		$(".payPosition").css('display','flex');
		$(".PositionBox").hide();
		$(".payMethod").show();
	})
    
	$(".closeBox").click(function(){
		$(".payPosition").hide();
        $("#cover").css("opacity","1");
	})

    $(document).ready(function(){
        var a=GetRequest();
        var id = a['id'];
        var articleType = a['articleType'];
        $.ajax({
            type : "POST",
            url : "/scenery/article/sceneryArticleDetail",
            data : {id:id},
            async : false,
            success : function(data) {
                if(data != null && data != '') {
                    if(data.code==0){
                        $.ajax({
                            type : "POST",
                            url :  "/common/sysFile/list",
                            data : {attachId:data.sceneryArticleDO.attachId},
                            async : false,
                            success : function(data) {
                                if(data != null && data != '') {
                                    $(".spotImg").attr("src",data[0].fileUrl);
                                }
                            }
                        });

                        $(".articleTitle").text(data.sceneryArticleDO.articleTitle)
                        $(".articleIntroduction").text(data.sceneryArticleDO.articleIntroduction)
                        $(".telphone").text(data.sceneryArticleDO.telphone)
                        $(".price").text(data.sceneryArticleDO.price)
                        $(".originalPrice").text("原价:￥"+data.sceneryArticleDO.originalPrice)
                        $(".spotBox3_content").html(data.sceneryArticleDO.articleContent)
                    }
                }
            }
        });


        $.ajax({
            type : "POST",
            url :  "/system/link/linkList",
            async : false,
            success : function(data) {
                if(data != null && data != '') {
                    if(data.code==0){
                        var div=""
                        for (var i=0;i<data.linkList.length;i++){
                            div+="<a href='"+data.linkList[i].linkUrl+"'>";
                            $.ajax({
                                type : "POST",
                                url :  "/common/sysFile/list",
                                data : {attachId:data.linkList[i].attachId},
                                async : false,
                                success : function(data) {
                                    if(data != null && data != '') {
                                        div+="<img src='"+data[0].fileUrl+"' /></a>"
                                    }
                                }
                            });
                        }
                        $("#link").after(div)
                    }
                }
            }
        });

        $.ajax({
            type : "GET",
            url :  "/sys/sysSet/getSet",
            data : {type:''},
            async : false,
            success : function(data) {
                if(data != null && data != '') {
                    if(data.code==0){
                        var setDOList=data.setDOList
                        for (var i=0;i<setDOList.length;i++){
                            $("#"+setDOList[i].setCode).text(setDOList[i].setValue)
                        }
                    }
                }
            }
        });
    })


</script>
</body>
</html>

